<template>
	<view class="login-box">
		<view class="login-content" v-if="type===1">
			<view class="login-title">登录/注册</view>
			<view class="">
				<van-field :value="mobile" type="number" :maxlength="11" @change="mobile = $event.detail"
					:border="false" placeholder="手机号" clearable>
					<view class="fx-center-center" slot="left-icon">
						<image src="/static/phone_icon.png" mode="widthFix" class="left-icon"></image>
					</view>
				</van-field>
				<!-- <van-field :value="password" @change="password = $event.detail" :border="false" placeholder="登录密码"
					clearable>
					<view class="fx-center-center" slot="left-icon">
						<image src="/static/eyes_icon.png" mode="widthFix" class="left-icon"></image>
					</view>
					<template slot="button">
						<view class="" @click="toChangeType(3)">忘记密码？</view>
					</template>
				</van-field> -->
				<van-field :value="code" @change="code = $event.detail" :border="false" placeholder="验证码" clearable>
					<view class="fx-center-center" slot="left-icon">
						<image src="/static/code_icon.png" mode="widthFix" class="left-icon"></image>
					</view>
					<template slot="button">
						<view style="color: #4078E5;" @click="getCode">{{codeText}}</view>
					</template>
				</van-field>
				<template v-if="show_invite">
					<van-field :value="invite" @change="invite = $event.detail" :border="false" placeholder="邀请码"
						clearable>
						<view class="fx-center-center" slot="left-icon">
							<image src="/static/invite_icon.png" mode="widthFix" class="left-icon"></image>
						</view>
					</van-field>
				</template>
				<view class="fx-center agreement-box" @click="checkedRadio=!checkedRadio">
					<radio :checked="checkedRadio" color="#4078E5" />
					<view class="">已阅读并同意<text @click.stop="toArtical('agreement')">《用户服务协议》</text>和<text
							@click.stop="toArtical('privacy')">《隐私政策》</text></view>
				</view>
				<view class="login-btns">
					<van-button block color="#4078E5" @click="toLogin">登录</van-button>
					<!-- <view class="regist-text" @click="toChangeType(2)">注册</view> -->
				</view>
			</view>
			<view class="other-login">
				<van-divider contentPosition="center">其他登录方式</van-divider>
				<van-button custom-style="border: none;padding:50rpx 0" open-type="getPhoneNumber"
					@getphonenumber="getPhoneNumber">
					<image src="/static/wx_login.png" mode="widthFix"></image>
				</van-button>

			</view>
		</view>
		<view class="login-content" v-if="type===2">
			<view class="login-title">账号注册</view>
			<van-field :value="mobile" @change="mobile = $event.detail" :border="false" placeholder="手机号" clearable>
				<view class="fx-center-center" slot="left-icon">
					<image src="/static/phone_icon.png" mode="widthFix" class="left-icon"></image>
				</view>
			</van-field>
			<van-field :value="code" @change="code = $event.detail" :border="false" placeholder="验证码" clearable>
				<view class="fx-center-center" slot="left-icon">
					<image src="/static/code_icon.png" mode="widthFix" class="left-icon"></image>
				</view>
				<template slot="button">
					<view style="color: #4078E5;">获取验证码</view>
				</template>
			</van-field>
			<van-field :value="password" @change="password = $event.detail" :border="false" placeholder="设置登录密码"
				clearable>
				<view class="fx-center-center" slot="left-icon">
					<image src="/static/password_icon.png" mode="widthFix" class="left-icon"></image>
				</view>
			</van-field>
			<van-field :value="invite" @change="invite = $event.detail" :border="false" placeholder="邀请码（必填）" clearable>
				<view class="fx-center-center" slot="left-icon">
					<image src="/static/invite_icon.png" mode="widthFix" class="left-icon"></image>
				</view>
			</van-field>
			<view class="fx-center agreement-box">
				<radio :checked="checkedRadio" color="#4078E5" />
				<view class="">已阅读并同意<text @click="toArtical('agreement')">《用户服务协议》</text>和<text
						@click="toArtical('privacy')">《隐私政策》</text></view>
			</view>
			<view class="login-btns">
				<van-button block color="#4078E5" @click="toRegister">提交注册</van-button>
				<view class="regist-text" @click="toChangeType(1)">返回登录</view>
			</view>
		</view>
		<view class="login-content" v-if="type===3">
			<view class="login-title">找回密码</view>
			<van-field :value="mobile" @change="mobile = $event.detail" :border="false" placeholder="手机号" clearable>
				<view class="fx-center-center" slot="left-icon">
					<image src="/static/phone_icon.png" mode="widthFix" class="left-icon"></image>
				</view>
			</van-field>
			<van-field :value="code" @change="code = $event.detail" :border="false" placeholder="验证码" clearable>
				<view class="fx-center-center" slot="left-icon">
					<image src="/static/code_icon.png" mode="widthFix" class="left-icon"></image>
				</view>
				<template slot="button">
					<view style="color: #4078E5;">获取验证码</view>
				</template>
			</van-field>
			<van-field :value="password" @change="password = $event.detail" :border="false" placeholder="设置登录密码"
				clearable>
				<view class="fx-center-center" slot="left-icon">
					<image src="/static/password_icon.png" mode="widthFix" class="left-icon"></image>
				</view>
			</van-field>
			<view class="fx-center agreement-box">
				<radio :checked="checkedRadio" color="#4078E5" />
				<view class="">已阅读并同意<text @click="toArtical('agreement')">《用户服务协议》</text>和<text
						@click="toArtical('privacy')">《隐私政策》</text></view>
			</view>
			<view class="login-btns">
				<van-button block color="#4078E5" @click="toForget">找回密码</van-button>
				<view class="regist-text" @click="toChangeType(1)">返回登录</view>
			</view>
		</view>

		<view class="login-content" v-if="type===5">
			<view class="login-title">登录</view>
			<van-field :value="mobile" @change="mobile = $event.detail" :border="false" placeholder="手机号" clearable>
				<view class="fx-center-center" slot="left-icon">
					<image src="/static/phone_icon.png" mode="widthFix" class="left-icon"></image>
				</view>
			</van-field>
			<van-field :value="code" @change="code = $event.detail" :border="false" placeholder="验证码" clearable>
				<view class="fx-center-center" slot="left-icon">
					<image src="/static/code_icon.png" mode="widthFix" class="left-icon"></image>
				</view>
				<template slot="button">
					<view style="color: #4078E5;">获取验证码</view>
				</template>
			</van-field>
			<van-field :value="invite" @change="invite = $event.detail" :border="false" placeholder="邀请码（必填）" clearable>
				<view class="fx-center-center" slot="left-icon">
					<image src="/static/invite_icon.png" mode="widthFix" class="left-icon"></image>
				</view>
			</van-field>
			<view class="fx-center agreement-box">
				<radio :checked="checkedRadio" color="#4078E5" />
				<view class="">已阅读并同意<text @click="toArtical('agreement')">《用户服务协议》</text>和<text
						@click="toArtical('privacy')">《隐私政策》</text></view>
			</view>
			<view class="login-btns">
				<van-button block color="#4078E5" @click="$refs.tipRef.show()"
					v-if="!checkedRadio">微信一键授权手机号</van-button>
				<van-button block color="#4078E5" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber"
					v-else>微信一键授权手机号</van-button>

			</view>
		</view>
		<c-center-dialog ref="tipRef" comfirmText="继续" cancelText="不同意" @comfirm="dialogClose">
			<template>
				<view class="dialog-title">请阅读并同意以下条款</view>
				<view class="">已阅读并同意<text class="tip-color" @click="toArtical('agreement')">《用户服务协议》</text>和<text
						class="tip-color" @click="toArtical('privacy')">《隐私政策》</text>
				</view>
			</template>
		</c-center-dialog>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				password: '',
				mobile: '',
				code: '',
				codeText: '获取验证码',
				invite: '',
				show_invite: false, //是否显示邀请码弹框
				type: 1, //1登录，2注册，3找回密码,5微信授权登录
				checkedRadio: false,
				timer: null
			};
		},
		onLoad() {
			this.invite = uni.getStorageSync('inviteCode') || ''
		},
		methods: {
			toChangeType(index) {
				this.password = ''
				this.mobile = ''
				this.code = ''
				this.invite = ''
				this.type = index
			},
			// 登录
			toLogin() {
				if (this.checkedRadio) {
					let list = {
						mobile: this.mobile,
						code: this.code,
					}
					if (this.show_invite) {
						list.invite_code = this.invite
					}
					this.$api.requst('/gwc/user/login', list, 'POST').then(res => {
						if (res.data.other_info) {
							uni.setStorageSync("token", res.data.token)
							uni.setStorageSync("userId", res.data.uid)
							this.$store.commit('loginChange', res.data.token);
							if (getCurrentPages().length > 1) {
								uni.navigateBack()
							} else {
								uni.switchTab({
									url: '/pages/index/index'
								})
							}
						} else {
							uni.reLaunch({
								url: '/pages/login/chooseIdentify/chooseIdentify?info=' + JSON.stringify(
									res
									.data)
							})
						}
					})
				} else {
					this.$refs.tipRef.show()
				}
			},
			// 注册
			toRegister() {

			},
			// 找回密码
			toForget() {},
			dialogClose() {
				this.checkedRadio = true
				this.$refs.tipRef.close()
			},
			// 获取验证码
			getCode() {
				if (this.codeText === '获取验证码') {
					if (!this.$api.isValidPhone(this.mobile)) {
						this.$api.showError('请输入正确的手机号！')
						return
					}
					this.$api.requst('/auth_codes', {
						mobile: this.mobile,
						code_type: 1
					}, 'POST').then(res => {
						this.$api.showError('验证码已发送')
						this.show_invite = res.data.invite
						this.codeText = '60s'
						let num = 60
						this.timer = setInterval(() => {
							if (num <= 0) {
								this.codeText = '获取验证码'
								clearInterval(this.timer)
								this.timer = null
							} else {
								num--
								this.codeText = num + 's'
							}

						}, 1000)
					})
				}
			},
			// 微信登录
			wxlogin() {
				this.$refs.tipRef.show()
			},
			// 获取手机号
			getPhoneNumber(e) {
				uni.login({
					provider: 'weixin',
					success: (resp) => {
						console.log('resp', resp, e)
						this.loginRequest(resp.code, e.detail.iv, e.detail.encryptedData)
					},
					fail: (err) => {
						this.$api.showError(err.errMsg)
					}
				});
			},
			// 微信小程序授权接口请求
			loginRequest(code, iv, encryptedData) {
				var list = {
					code: code,
					encrypted: encryptedData,
					iv: iv
				}
				this.$api.requst('/gwc/user/wxmp_login', list, 'POST').then(res => {
					if (res.data.other_info) {
						uni.setStorageSync("token", res.data.token)
						uni.setStorageSync("userId", res.data.uid)
						this.$store.commit('loginChange', res.data.token);
						if (getCurrentPages().length > 1) {
							uni.navigateBack()
						} else {
							uni.switchTab({
								url: '/pages/index/index'
							})
						}

					} else {
						uni.reLaunch({
							url: '/pages/login/chooseIdentify/chooseIdentify?info=' + JSON.stringify(res
								.data)
						})
					}
				})
			},
			toArtical(title) {
				uni.navigateTo({
					url: '/pages/artical/artical?slug=' + title
				})
			}

		}
	}
</script>

<style lang="scss">
	.login-box {
		height: 100vh;
		background-color: #fff;
		overflow: hidden;
		box-sizing: border-box;

		.login-content {
			padding: 72rpx 48rpx;

			.login-title {
				font-size: 44rpx;
				font-weight: bold;
				margin-bottom: 48rpx;
			}

			.left-icon {
				width: 32rpx;
				height: 32rpx;
				margin-right: 16rpx;
			}

			.agreement-box {
				margin-top: 26rpx;
				font-size: 26rpx;

				text {
					color: #4078E5;
				}
			}

			.login-btns {
				margin-top: 70rpx;

				.regist-text {
					margin-top: 48rpx;
					font-size: 32rpx;
					font-weight: bold;
					text-align: center;
					color: #4078E5;
				}
			}
		}

		.other-login {
			position: absolute;
			bottom: 100rpx;
			left: 25%;
			right: 25%;
			display: flex;
			flex-direction: column;
			align-items: center;

			image {
				width: 96rpx;
				height: 96rpx;
			}
		}

	}

	.dialog-title {
		font-size: 34rpx;
		font-weight: bold;
		margin-bottom: 32rpx;
	}

	.tip-color {
		color: #4078E5;
	}


	::v-deep .van-cell {
		background-color: #F1F3F6 !important;
		border-radius: 4rpx;
		margin-top: 24rpx;
	}
</style>